<template>
	<el-row class="userList">
		<el-col :span="24">
			<div class="grid-content">
				<div class="">
					<el-button @click="add" type="primary" size="small" icon="plus">新增</el-button>
					<el-button @click="modify" type="primary" size="small" icon="edit">修改</el-button>
					<el-button @click="deleteData" type="danger" size="small" icon="delete">删除</el-button>
				</div>
				<div class="data-list">
					<el-table :data="tableData" border style="width: 100%" highlight-current-row @current-change="handleCurrentChange">
						<el-table-column inline-template width="55">
							<div>
								<label class="radio">
									<input type="radio" value="2" :data-index="$index" name="radio">
									<span class="dot"></span>
								</label>
							</div>
						</el-table-column>
						<el-table-column prop="systemCode" label="系统编码" width="150">
						</el-table-column>
						<el-table-column prop="systemName" label="系统名称" width="200">
						</el-table-column>
						<el-table-column prop="moduleCode" label="模块编码" width="150">
						</el-table-column>
						<el-table-column prop="moduleName" label="模块名称" width="150">	
						</el-table-column>
						<el-table-column prop="description" label="模块描述" >	
						</el-table-column>
					</el-table>
					<el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="1" :page-sizes="[10,20, 50, 100]" :page-size="pageSize" layout="->,prev, pager, next, jumper, sizes,total" :total="totalSize">
					</el-pagination>
				</div>
			</div>
		</el-col>

		<!--新增-->
		<el-dialog :title="title" v-model="addModule" size="tiny">
			<el-form :model="userForm" :rules="rules" ref="userForm">
				<el-form-item prop="moduleCode" label="模块编码" :label-width="formLabelWidth">
					<el-input :disabled="disabled"  v-model="userForm.moduleCode" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="moduleName" label="模块名称" :label-width="formLabelWidth">
					<el-input :disabled="disabled"  v-model="userForm.moduleName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="description" label="模块描述" :label-width="formLabelWidth">
					<el-input :disabled="disabled"  v-model="userForm.description" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="submitForm('userForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!--修改-->
		<el-dialog :title="title" v-model="modifyModule" size="tiny">
			<el-form :model="userForm" :rules="rules" ref="userForm">
				<el-form-item prop="moduleCode" label="模块编码" :label-width="formLabelWidth">
					<el-input :disabled="false"  v-model="userForm.moduleCode" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="moduleName" label="模块名称" :label-width="formLabelWidth">
					<el-input :disabled="false"  v-model="userForm.moduleName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="description" label="模块描述" :label-width="formLabelWidth">
					<el-input :disabled="false"  v-model="userForm.description" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="modifyData">确 定</el-button>
			</div>
		</el-dialog>
	</el-row>
		
</template>

<script>
	import {
		Message
	} from 'element-ui';
	import {
		Notification
	} from 'element-ui';

	export default {
		data() {

				var vUsername = (rule, value, callback) => {
					if(value === '') {
						callback(new Error('请输入用户工号'));
					} else {
						callback();
					}
				};
				return {
					userForm: {
						id: '',
						systemId:'',
						systemCode:'',
						systemName: '',
						moduleName: '',
						moduleCode:'',
						description:''
					},
					tableData: [],
					systemId:'',
					id:'',
					systemCode:'',
					systemName: '',
					moduleName: '',
					module_code: '',
					description:'',
					addModule: false,
					modifyModule: false,
					formLabelWidth: '100px',
					multipleSelection: [],
					roleModel: '',
					props: {
						label: 'name',
						children: 'zones'
					},
					title: '新增用户',
					isShow: false,
					disabled: false,
					pageSize: 10,
					totalSize: 0,
					userId: '',
					defaultRole: '',
					rules: {
						username: [{
							validator: vUsername,
							trigger: 'blur'
						}]
					}
				}
			},
			methods: {
				getPageData(param) {
					if(!param || param == {}) {
						var param = {}
					}
					if(!param.hasOwnProperty("pageSize")) {
						param.pageSize = this.pageSize
					}
					if(!param.hasOwnProperty("start")) {
						param.start = 0
					}
					this.systemId=this.$store.state.global.systemId
					
					param.systemId=this.systemId
					this.$httpExt().get('/tmModule/selectModule',
							param
						)
						.then((response) => {
							var body = response.result
							this.tableData = body
							this.totalSize = body.totalSize
							var data = body.rows
							this.tableData = data
						}, (response) => {
							Notification.error({
								title: '异常',
								message: response.msg
							})
						});
				},
				initPageData(){
					this.$httpExt().get('/systemInfo/sysSelect')
						.then((response) => {
							var condition = response.result
							debugger
							this.options = condition
						}, (response) => {
							Notification.error({
								title: '异常',
								message: response.msg
							})
						});
				},
				selectSysName(value){
					this.userForm.systemCode = value				
					for(let [index, item] of this.options.entries()) {
						if(value == item.systemCode){
							this.userForm.systemName = item.systemName	
						}
					}
				},	
				handleCurrentChange(val) {
					if(!val) {
						return
					}
					var that = this
					this.currentRow = val;
					this.id = val.id
					this.userForm.moduleCode=val.moduleCode
					this.userForm.moduleName=val.moduleName
					this.userForm.description=val.description
					setTimeout(function() {
						if(that.$el.querySelector("tr.current-row")) {
							var current = that.$el.querySelector("tr.current-row").querySelector("input[type=radio]")
							that.index = current.dataset.index
//							that.$store.state.global.name22=current.dataset.username
						}
					}, 30)
				},
				add() {

					this.title = '新增模块配置'
					this.addModule = true
					this.userForm.systemCode=''
					this.userForm.systemName=''
					this.userForm.moduleCode=''
					this.userForm.moduleName=''
					this.userForm.description=''
					this.disabled = false
					this.isShow = false

				},
				modify(){
					this.title = '修改模块配置'
					this.modifyModule = true
					this.disabled = true
					this.isShow = false
				},
				modifyData() {
					debugger
					if(this.index >= 0) {
						this.$httpExt().get('/tmModule/update', {
							"id" :this.id,
							"moduleCode" :this.userForm.moduleCode,
							"moduleName" :this.userForm.moduleName,
							"description" :this.userForm.description
						}).then((response) => {
							this.modifyCase = false
							var body = response
								Message({
									message: '修改成功!',
									type: 'success'
								});
						}, (response) => {
							Notification.error({
								title: '异常',
								message: response.msg
							})
						});
						
						this.modifyModule = false
					
						this.getPageData()
						
					} else {
						Message({
							message: '请选择一条进行操作！',
							type: 'warning'
						});
					}
					
				},
				deleteData() {
					if(this.index) {
						this.$confirm('确定删除该配置吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$httpExt().get('/tmModule/delete', {								
								'id': this.id
							}).then((response) => {
								var body = response	
								this.tableData.splice(this.index, 1);
								this.index = ''
								Message({
									message: '删除成功!',
									type: 'success'
								});

							}, (response) => {
								Notification.error({
									title: '异常',
									message: response.msg
								})
							})

						}).catch(() => {

						});
					} else {
						Message({
							message: '请选择一条进行操作！',
							type: 'warning'
						});
					}

				},
				submitForm(form) {

					if(this.userForm.moduleCode == "" || this.userForm.moduleCode == null) {
						this.$refs[form].validate((valid) => {
							if(valid) {
								this.saveModule()
							} else {
								return false;
							}
						});
					} else {
						this.saveModule()
					}				
								
				},
				saveModule() {
//					let params = "moduleId=" + this.moduleId;
//					params += "&caseName=" + this.userForm.caseName + "&description=" + this.userForm.description + "&runCount=" + this.userForm.runCount;
					this.$httpExt().get('/tmModule/add',{	
						"systemId" :this.$store.state.global.systemId,
						"moduleCode" :this.userForm.moduleCode,
						"moduleName" :this.userForm.moduleName,
						"description" :this.userForm.description
					}).then((response) => {
						debugger
						Message({
							message: '保存成功',
							type: 'success'
						});
					}, (response) => {
						Notification.error({
							title: '异常',
							message: response.msg
						})
					});
					this.addModule = false
					
					this.getPageData()	
				},
				cancel() {
					this.$refs.userForm.resetFields()
					this.addModule = false
				},
				
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				sizeChange(val) {
					var param = {
						pageSize: val
					}
					this.getPageData(param)
				},
				currentChange(val) {
					var start = (val - 1) * this.pageSize
					var param = {
						start: start
					}
					this.getPageData(param)
				},

			},
			mounted() {
				this.getPageData()
				
				this.initPageData()
			}
	}
</script>

<style>
	.roleRadio {
		width: 15px;
		overflow: hidden;
		padding: 7px;
	}
</style>